<%@ page contentType="text/html; charset=utf-8" language="java"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@include file="/static/common/header.jsp"%>
<%@include file="/static/common/easyui.jsp"%>
<%@include file="/static/common/common.jsp"%>
<script type="text/javascript"
	src="${ctx}/static/highChart/highcharts.js"></script>

<script>  
	$(document).ready(function(){
		var scrollWidth = document.body.scrollWidth;
		
		$("#gridDiv").css({width: scrollWidth-40});
		
		initStatData();
	});
	
	function initStatData() {
		$('#orderProvStatTable').datagrid({
			title:'详细信息',
			iconCls:'icon-bumen',
			method:'post',
			width:600,
			height:800,
			nowrap: false,
			striped: true,
			collapsible:true,
			url: '${ctx}//infobird/chart/provStatList?orderType=1',
			idField:'id',
			columns:[[
						{field:'provName',title:'地区',align:'center',width:200},
						{field:'num',title:'数量',align:'center',width:200}
					]],
					pagination:true,
					pageSize:10,
					rownumbers:true,
					
					//toolbar:'#tb',
					onLoadSuccess:function(){
						$('#orderProvStatTable').datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
					}
				});
	}
	
	// On document ready, call visualize on the datatable.
	function initChart() {
		var table = document.getElementById('datatable'),
		options = {
			chart: {
				renderTo: 'container',
				defaultSeriesType: 'column',
				backgroundColor:'#eee',
				margin: [ 50, 50, 100, 80]
			},
			title: {
				text: '工单分省统计'
	         },
	         yAxis: {
	        	 min: 0,
	        	 title: {
	        		 text: '数量'
	        		 }
		     },
		     legend: {
		    	 enabled: false
		     }
		};
		Highcharts.visualize(table, options);
	}
	
	var chart;
	Highcharts.visualize = function(table, options) {
		// the xAxis
		options.xAxis = [];
		// the data series
		options.series = [];
		options.xAxis[0] = {
				categories: [],
				labels: {
					rotation: 0,
					align: 'center',
					style: {
						fontSize: '13px',
						fontFamily: 'Verdana, sans-serif'
					}
				}
		};
		options.series[0] = {
				name: '工单',
				data: [],
				dataLabels: {
					 enabled: true,
					 rotation: -90,
					 color: '#FFFFFF',
					 align: 'right',
					 x: 4,
					 y: 10,
					 style: {
						 fontSize: '13px',
						 fontFamily: 'Verdana, sans-serif',
						 textShadow: '0 0 3px black'
					 }
				}
		};
		$("#gridDiv div.datagrid-view2 table.datagrid-btable tbody tr").each( function() {
			var provName = $(this).find("td:eq(0)").text();
			var num =parseFloat($(this).find("td:eq(1)").text());
			options.series[0].data.push({name:provName,y:num});
			options.xAxis[0].categories.push(provName);
		});
		chart = new Highcharts.Chart(options);
	} 


	//表格查询
	function searchData() {
		var params = $('#busiTable').datagrid('options').queryParams; //先取得 datagrid 的查询参数
		var fields = $('#queryForm').serializeArray(); //自动序列化表单元素为JSON对象

		var orderNo = $("#orderNo").val();
		var parentBusinessId = $("#parentBusinessId").combobox('getValue');
		var dealFlag = $("#dealFlag").combobox('getValue');
		
		var cust_name = $("#cust_name").val();
		var acct_no = $("#acct_no").val();
		var mobile = $("#mobile").val();
		var telephone = $("#telephone").val();
		
		var create_user = $("#create_user").val();
		var deal_user = $("#deal_user").val();
		var start_time = $("#start_time").datetimebox("getText");
		var end_time = $("#end_time").datetimebox("getText");
		
		
		params['orderNo']=orderNo;
		params['parentBusinessId']=parentBusinessId;
		params['dealFlag']=dealFlag;
		params['cust.name']=cust_name;
		params['cust.acctNo']=acct_no;
		params['cust.mobile']=mobile;
		params['cust.telephone']=telephone;
		
		params['createUser']=create_user;
		params['dealUser']=deal_user;
		params['tempVar']=start_time;
		params['props']=end_time;

		$('#busiTable').datagrid('reload'); //设置好查询参数 reload 一下就可以了
	}
	
	//清空查询条件
	function clearForm() {
		$('#queryForm').form('clear');
		$('#parentBusinessId').combobox('select', '0');
		searchData();
	}
	
	function load() {
		setTimeout("initChart()",200);
	}
	
</script>

<style type="text/css">
</style>
</head>

<body style="background:#eee;" onload="load();">
	<div id="tb"  style="width:100%; padding: 5px; height: auto">
		<!-- 查询form-->
		<div>
			<form id="queryForm" method="post">
				<div>
					<table id="orderQueryTable" class="listTable" cellspacing="0"
						cellpadding="0" border="0"
						style="table-layout: auto; width: 100%" data-options="fit:true">
						<tr>
							<td align="right">统计周期：</td>
							<td><select name="period" id="period"
								class="easyui-combobox" style="width: 150px;">
									<option value="1">日报表</option>
									<option value="2">周报表</option>
									<option value="3">月报表</option>
									<option value="4">自定义报表</option>
							</select></td>
							<td align="right">业务类型：</td>
							<td><select name="parentBusinessId" id="parentBusinessId"
								class="easyui-combobox" style="width: 150px;">
									<option value="0">=== 所有 ===</option>
									<c:forEach items="${voiceList}" var="dic">
										<option value="${dic.id}">${dic.dicName}</option>
									</c:forEach>
							</select></td>
						</tr>
						<tr id="startTr" style="display: none;">
							<td align="right">开始时间：</td>
							<td colspan="3"><input type="text" id="start_date"
								name="start_date" class="easyui-datebox"
								style="width: 150px; border-color: #95B8E7"></input></td>
						</tr>
						<tr>
							<td align="right">截止时间：</td>
							<td colspan="3"><input type="text" id="end_date"
								name="end_date" class="easyui-datebox"
								style="width: 150px; border-color: #95B8E7"></input></td>
						</tr>
						<tr>
							<td align="right">统计时段：</td>
							<td colspan="3">
							<input name="start_time" id="start_time" class="easyui-numberspinner"  data-options="min:0,max:23,editable:true">
							 &nbsp;&nbsp;时&nbsp;&nbsp;至&nbsp;&nbsp; 
							<input name="end_time" id="end_time" class="easyui-numberspinner"  data-options="min:0,max:23,editable:true">
							&nbsp;&nbsp;时&nbsp;&nbsp;
							</td>
						</tr>
						<tr>
							<td align="right">统计类型：</td>
							<td colspan="3">
								<div class="fl">
									<input type="radio" name="statType" value="1"
										checked="checked" /> 分时&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
								<div class="fl">
									<input type="radio" name="statType" value="2" />
									汇总&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
							</td>
						</tr>
						<tr>
							<td align="right">报表样式：</td>
							<td colspan="3"><input type="radio" name="reportStyle"
								value="1" checked="checked" />列表&nbsp;&nbsp;&nbsp;&nbsp;</td>
						</tr>
						<tr>
							<td align="right">报表说明：</td>
							<td colspan="3">
								<p>周报表、月报表和自定义报表可以查询到截止昨天的数据。
									比如今天是2014-10-11，你可以查到截止2014-10-10的数据。日报表可以查询到截止当天的数据</p>
							</td>
						</tr>
					</table>
				</div>
			</form>				
		</div>

		<!-- 查询按钮-->
		<div>
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>
					
						<span style="float: right; margin-bottom: 5px;">
							<a href="javascript:void(0)" onclick="searchData();" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
							<a href="javascript:void(0)" onclick="clearForm();" class="easyui-linkbutton" iconCls="icon-reload">清空</a>
						</span>
					</td>
				</tr>
			</table>
		</div>
	</div>
	
	<div id="container" data-options="region:'north',split:true" style="width:100%;height:300px;background:#eee;">
	</div>
	
	<div id="gridDiv" style="width:100%;height:500px;">
		<table class="easyui-datagrid" id="orderProvStatTable" title="Basic DataGrid" data-options="fit:true">
		</table>
	</div>
	
    <div id="innerFramWindow" class="easyui-window" data-options="closed:true,modal:true,collapsible:false,minimizable:false,maximizable:false,draggable:true,onBeforeClose:function(){}" style="overflow: hidden">
  		<iframe id="innerWinFram" scrolling="yes" frameborder="0"  src='' style="width:100%;height:100%;"></iframe>
	</div>

	<div id="MyPopWindow" modal="true" shadow="false" minimizable="false" cache="false" maximizable="false" collapsible="false" resizable="false" style="margin: 0px;padding: 0px;overflow: auto;"></div>
  
</body>
</html>
